<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>DWell CMS</title>

    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/jo-bootstrap.css">
    <link rel="stylesheet" href="static/css/main.css">
    <link rel="stylesheet" href="static/css/table.css">
    <link rel="stylesheet" href="static/css/contentbody.css">
    <link rel="stylesheet" href="static/icomoon/style.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">

    <!--<link rel="stylesheet" href="static/plugins/dataTables/css/jquery.dataTables.min.css">-->
    <!--<link rel="stylesheet" href="static/plugins/dataTables/css/dataTables.foundation.min.css">-->
    <!-- 可选的Bootstrap主题文件（一般不用引入）
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="dashboard fixed skin-blue">
    <div class="wrapper">
        <header class="main-header">
            <a href="" class="logo">
                <span class="logo-lg">
                    <b>Admin</b>LTE
                </span>
            </a>
            <nav class="navbar navbar-static-top" role="navigation">
                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                </a>
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <li class="dropdown messages-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-envelope-o"></i>
                                <span class="label label-success">4</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">You Have 4 Messages</li>
                                <li>

                                </li>
                            </ul>
                        </li>
                        <li class="dropdown notifications-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-bell-o"></i>
                                <span class="label label-warning">10</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">You have 10 notifications</li>
                                <li>

                                </li>
                                <li class="footer"></li>
                            </ul>
                        </li>
                        <li class="dropdown tasks-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-flag-o"></i>
                                <span class="label label-danger">9</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">You have 9 tasks</li>
                                <li>

                                </li>
                                <li class="footer"></li>
                            </ul>
                        </li>
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="static/img/avatar.png" class="user-image" alt="User Image"/>
                                <span class="hidden-xs">Jange Gu</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="user-header">header</li>
                                <li class="user-body">
                                    user body
                                </li>
                                <li class="user-footer"></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
    </div><!--  头部布局完毕  -->

    <div class="bottom">
        <div class="body-sidebar">
            <div class="sidebar-content">
                <div class="sidebar-inner">
                    <div class="sidebar-fold"></div>
                    <div class="sidebar-nav">
                        <div class="nav-menu-title sub-menus-toggle">
                            <div class="nav-menu-title-inner">
                                <span class="nav-menu-title-text">产品与服务</span>
                                <span class="nav-menu-manage"></span>
                                <span class="toggle-icon fa fa-angle-down nav-menu-title-icon"></span>
                            </div>
                        </div>
                        <ul class="nav-sub-menus">
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-newspaper"></span>
                                    </div>
                                    <span class="menu-item-title">对象存储OSS</span>
                                </a>
                            </li><!--nav-menu-item每个子菜单-->
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-newspaper"></span>
                                    </div>
                                    <span class="menu-item-title">域名</span>
                                </a>
                            </li>
                        </ul>
                    </div><!--sidebar-nav菜单分类Accordion-->

                    <div class="sidebar-nav">
                        <div class="nav-menu-title sub-menus-toggle">
                            <div class="nav-menu-title-inner">
                                <span class="nav-menu-title-text">系统管理</span>
                                <span class="nav-menu-manage"></span>
                                <span class="toggle-icon fa fa-angle-down nav-menu-title-icon"></span>
                            </div>
                        </div>
                        <ul class="nav-sub-menus">
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-blog"></span>
                                    </div>
                                    <span class="menu-item-title">用户管理</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-camera"></span>
                                    </div>
                                    <span class="menu-item-title">角色管理</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">资源管理</span>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="sidebar-nav">
                        <div class="nav-menu-title sub-menus-toggle">
                            <div class="nav-menu-title-inner">
                                <span class="nav-menu-title-text">菜品管理</span>
                                <span class="nav-menu-manage"></span>
                                <span class="toggle-icon fa fa-angle-down nav-menu-title-icon"></span>
                            </div>
                        </div>
                        <ul class="nav-sub-menus">
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-blog"></span>
                                    </div>
                                    <span class="menu-item-title">菜品类别</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-camera"></span>
                                    </div>
                                    <span class="menu-item-title">菜品上传</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">菜品列表</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">点菜备注</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">退菜备注</span>
                                </a>
                            </li>
                        </ul>
                    </div>


                    <div class="sidebar-nav">
                        <div class="nav-menu-title sub-menus-toggle">
                            <div class="nav-menu-title-inner">
                                <span class="nav-menu-title-text">订单管理</span>
                                <span class="nav-menu-manage"></span>
                                <span class="toggle-icon fa fa-angle-down nav-menu-title-icon"></span>
                            </div>
                        </div>
                        <ul class="nav-sub-menus">
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-blog"></span>
                                    </div>
                                    <span class="menu-item-title">订单记录</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-camera"></span>
                                    </div>
                                    <span class="menu-item-title">挂账记录</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">清账记录</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">评价管理</span>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="sidebar-nav">
                        <div style="padding: 3px;"></div>
                        <div style="color: #FFFFFF; padding: 4px; font-size: 12px;">Copyright @ DWell Smartfd Ver 1.0.0</div>
                        <div style="padding: 10px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="body-content">
            <div class="content-wrapper" id="products-mgr">
                <div class="content-navbar">

                </div>
                <div class="content-main">
                    <div class="container content-container">
                        <div class="row">
                            <div class="col-sm-12">
                                <div style="padding: 8px 0;">
                                    <div class="content-header">
                                        <ul class="breadcrumb">
                                            <li><i class="fa fa-home"></i><a href="#">Home</a></li>
                                            <li>资源管理</li>
                                            <li>新增菜单元素</li>
                                        </ul>
                                    </div>
                                    <div class="content-body-group container">
                                        <div class="row">
                                            <div class="col-md-9">
                                                <div class="jo-form-wrapper">
                                                    <form id="postform" class="jo-form">
                                                        <div class="jo-ipt-inline">
                                                            <div class="jo-addbox">
                                                                <label><b>*</b>角色名：</label>
                                                                <input type="text" name="name" maxlength="40" datatype="*1-20"/>
                                                                <span class="Tips">1-40个字符，支持中文、英文、数字、空格</span>
                                                            </div>
                                                            <div class="jo-addbox">
                                                                <label><b></b>父节点：</label>
                                                                <input type="text" name="parentId" id="pid" />
                                                            </div>
                                                            <div class="jo-addbox">
                                                                <label><b></b>资源类型：</label>
                                                                <div class="jo-form-radio-inline" id="types">
                                                                    <label for="type1" class="">菜单</label>
                                                                    <input type="radio" name="type" id="type1" value="1" checked>
                                                                    <label for="type2" class="">按钮</label>
                                                                    <input type="radio" name="type" id="type2" value="2">
                                                                    <label for="type3" class="">功能</label>
                                                                    <input type="radio" name="type" id="type3" value="3">
                                                                </div>
                                                                <span class="Tips"></span>
                                                            </div>
                                                            <div class="jo-addbox">
                                                                <label><b>*</b>资源路径：</label>
                                                                <input type="text" name="url" value maxlength="100" datatype="cnEnNumSpace">
                                                                <span class="Tips">1-100个字符，英文、数字、空格</span>
                                                            </div>
                                                            <div class="jo-addbox">
                                                                <label><b></b>资源权限字符串：</label>
                                                                <input type="text" name="permission" value />
                                                                <span class="Tips"></span>
                                                            </div>
                                                            <div class="jo-addbox">
                                                                <label><b></b>资源图标：</label>
                                                                <input type="text" name="icon" value />
                                                                <span class="Tips"></span>
                                                            </div>
                                                            <div class="jo-addbox">
                                                                <label><b>*</b>序号：</label>
                                                                <input type="text" name="seq" value />
                                                                <span class="Tips">请输入≥0 的整数</span>
                                                            </div>
                                                            <div class="jo-addbox">
                                                                <label><b></b>资源描述信息：</label>
                                                                <textarea style="width:400px; height: 100px;" name="description"></textarea>
                                                            </div>
                                                            <div class="jo-addbox">
                                                                <label><b>*</b>可用状态：</label>
                                                                <div class="jo-form-radio-inline">
                                                                    <label for="enabledyes" class="on">启用</label>
                                                                    <input type="radio" name="enabled" id="enabledyes" checked value="1"/>
                                                                    <label for="enabledno">禁用</label>
                                                                    <input type="radio" name="enabled" id="enabledno" value="0"/>
                                                                </div>
                                                                <span class="Tips"></span>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div><!-- col-md-9 -->
                                            <div class="col-md-3">
                                                <button class="btn btn-search" id="submit_add" type="button">确认新增</button>
                                            </div>
                                        </div><!-- row -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>-->
<script src="static/js/jquery-2.1.0.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<script src="static/plugins/validform/Validform_v5.3.2_min.js"></script>
<!--<script src="static/plugins/dataTables/js/jquery.dataTables.min.js"></script>-->
<!--<script src="static/plugins/dataTables/js/dataTables.foundation.min.js"></script>-->
<script type="text/javascript">
    var table;
    var validform;
    $(function(){
        /**
         * 可以通过设置高度，用animate的方式，更加平滑的切换查看效果
         */
        $('.sidebar-nav .sub-menus-toggle').click( function(e){
            e.preventDefault();
            $li = $(this).parent('.sidebar-nav');
            if( !$li.hasClass('nav-fold')){
                console.log($li.find("span.toggle-icon"));
                $li.find(".toggle-icon").removeClass('fa-angle-down').addClass('fa-angle-left');
                $li.addClass('nav-fold');
            }
            else {
                $li.find("span.toggle-icon").removeClass('fa-angle-left').addClass('fa-angle-down');
                $li.removeClass('nav-fold');
            }
            $li.find(' > .nav-sub-menus').toggle();
        });

        /*
        *  form表单中对radio和checkbox的选中事件
        */
        $(".jo-form-radio-inline").find("input:checked").each(function(e) {
            var checkedId = $(this).attr("id");
            var selector = "label[for='" + checkedId + "']";
            $(selector).addClass("checked").siblings().removeClass("checked");
        });

        $(document).on("click", ".jo-form-checkbox-inline label", function(e) {
            $(this).toggleClass("checked");
        });

        $(document).on("click", ".jo-form-radio-inline label", function(e) {
            $(this).addClass('checked').siblings().removeClass("checked");
        });
        $.Datatype.cnEnNumSpace = /^([\u4e00-\u9fa5]|[A-Za-z0-9]|\s)+$/;
        $.Datatype.enNum = /^[A-Za-z0-9]+$/;			//只能是英文字母或数字
        $.Datatype.capital = /^[A-Z]+$/;				//只能是大写字母
        $.Datatype.tinyMark = /^([\u4e00-\u9fa5]|[A-Za-z0-9]|\s|[,.，。！？(（）)、；;:：…【】〗〖》《『』［］“”])+$/;	//文本句子 中文 数字 字母 标点符号 空格
        $.Datatype.money = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/;
        validform = $("#postform").Validform({
            showAllError: false, 	//showAllError如果为true全部验证，为false则逐条验证
            tiptype:function(msg,o,cssctl){
                //msg:提示信息
                //o:{obj:*,type:*,curform:*}
                //obj:指向的是当前验证的表单元素（或表单对象，验证全部验证通过，提交表单时o.obj为该表单对象）
                //type:指示提示的状态
                //curform:为当前form对象
                //cssctl:内置的提示信息样式控制函数，该函数传入两个参数：显示提示信息的对象和当前提示的状态（即形参o的type）
                var inputType = o.obj.attr("type");
                var objtip = null;
                if("checkbox" == inputType){
                    objtip = o.obj.parent().siblings("span.Tips");
                }else{
                    objtip = o.obj.siblings("span.Tips");
                }
                //var objtip = o.obj.siblings("span.Tips");
                if(o.type == 1){
                    //如果是正在检测/提交数据
                }else if(o.type == 2){
                    //验证通过
                    objtip.html("<b class='icon-check-ok'></b>");
                }else if(o.type == 3){
                    //验证失败
                    objtip.html("<b class='icon-check-err'></b>"+msg);
                }
                //alert(objtip.html());			//得到<span class='Tips'>中的内容
                //cssctl(objtip,o.type);		//把validform的样式加给objtip
                //objtip.text(msg);				//仅仅把msg的内容直接展示，不会因为msg有html标签而被解析，直接展示
            },
            callback:function(form){
                //调用函数请求远程地址，refresh是目标iframe内的回调函数，在成功返回后调用
                //doAfterSuccessPost是该表单所在的iframe的回调函数，在成功返回后调用
                //两个回调函数分别处理请求成功后的事情
                /*var itemsArr = [];
                 $(".buy-num-text").each(function(){
                 var productId = $(this).attr("pid");
                 var buyNum = $(this).val();
                 var itemStr = productId+"x"+buyNum;
                 itemsArr.push(itemStr);
                 });
                 var items = itemsArr.join(',');
                 $("#items").val(items);
                 ajaxCall(form,'doAfterSuccessPost');
                 */
                //alert("ok");
                var data = $(form).serialize();
                alert(data);
                return;
                var url = $(form).attr("action");
                $.ajax({
                    url:url,
                    type:"post",
                    data:data,
                    //async:true,
                    beforeSend:function(xhr){
                        //遮罩层，表示在处理中......
                        //loadingDialog = artDialog.tips.loading();
                    },
                    success:function(d){
                        if (d) {
                            if(d.code == 200){
                                //成功
                            }else if(d.code == 400){
                                //失败，返回错误信息
                                alert(d.message);
                            }
                        }else{
                            alert("没有数据返回");
                        }
                    },
                    error:function(){
                        alert('由于网络或服务器太忙，提交失败，请重试！');
                    }
                });
                return false;
            }
        });

        validform.tipmsg.w["cnEnNumSpace"]="我特法克草草草！";
        validform.tipmsg.w["*2-20"]="长度在2-20之间！";
        validform.tipmsg.w["*1-20"]="长度在1-20之间！";
        validform.tipmsg.w["enNum"]="只能填英文字母或数字！";
        validform.tipmsg.w["capital"]="只允许填大写字母！";
        validform.tipmsg.w["tinyMark"]="菜品卖点只能由中文、英文、数字、空格、标点符号组成！";
        validform.tipmsg.w["money"]="请输入＞0 的数字，最多精确到小数点后2位";

        //保存并关闭
        $("#submit_add").on("click",function(){
            validform.submitForm(false);
        });

    });
</script>
</body>
</html>
